﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta charset="UTF-8">
    <title>登录页</title>
    <link href="/static/web/css/login.css" rel="stylesheet">
	<style>
		.error-message {
			color: red;
			font-size: 16px;
			margin-left: 10px;
			margin-top: 5px;
			display: none; /* 默认隐藏 */
		}
        .yzmimg {
           cursor: pointer;
           margin-left: 10px;
           vertical-align: middle;
           border: 1px solid #ddd;
        }

	</style>
</head>
<body>
    <div class="loginav">
        <div class="loginbox boxall">
            <div class="logo">考试平台登录</div>
            <div class="logintit"><span>用户登录</span></div>
            <ul class="logininput">
                <li>
					<i><img src="/static/web/images/icon1.png"></i>
					<input id="usernameInput" class="forminput" type="text" placeholder="用户名">
				</li>
				<li>
					<i><img src="/static/web/images/icon2.png"></i>
					<input id="passwordInput" class="forminput" type="password" placeholder="密码">
				</li>
				<li>
					<i><img src="/static/web/images/icon3.png"></i>
					<input id="captchaInput" class="forminput" type="text" placeholder="验证码" style="width: calc(100% - 150px)">
					<img id="captchaImage" src="" class="yzmimg">
				</li>

                <li>
                    <a id="loginButton" href="javascript:void(0);" class="btn btnblock btn-lg btn-block btn-primary login">登录</a>
					<div id="loginError" class="error-message"></div>
                </li>
            <li>
				<div class="flex1 forget">
					<label>
						<input id="rememberMe" type="checkbox" class="aui-checkbox">&nbsp;记住密码
					</label>
				</div>
			</li>

            </ul>
            <div class="boxfoot"></div>
        </div>
    </div>

    <script src="/static/component/jquery_3.3.1.js"></script>
    <script src='/static/component/layui/layui.js?v=" + Date.now() + "'></script>
    <script>
        let tokenCookieKey = "laytpWebToken";//Header中传递的token的key名称
        let tokenKey = "LayTp-Web-Token";//Header中传递的token的key名称
        let ajaxHeaders = {
            "LayTp-Web-Token": getCookie(tokenCookieKey),
            "Cache-Control": "no-cache"
        };//ajax请求默认发送的Header部分

        $(document).ready(function () {
			// 加载保存的用户名和密码
			loadSavedCredentials();
            // 生成验证码
            generateCaptcha();

            // 绑定登录按钮点击事件
            $("#loginButton").click(function () {
				// 获取用户名和密码
				var username = $("#usernameInput").val();
				var password = $("#passwordInput").val();
				// 校验用户名和密码是否为空
				if (!validateCredentials(username, password)) {
					return; // 如果校验失败，停止执行
				}

				// 获取用户输入的验证码
                var userCaptcha = $("#captchaInput").val();

                // 校验验证码是否正确
                if (validateCaptcha(userCaptcha)) {
                    // 验证码正确，请求接口
                    requestLogin();
                } else {
					// 验证码错误，显示提示
					showError("#loginError", "验证码错误，请重新输入！");
					generateCaptcha(); // 重新生成验证码
                }
            });
        });

        function getCookie(name) {
            let arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
            if (arr != null) {
                return (arr[2]);
            } else {
                return "";
            }
        }
		// 显示错误提示
		function showError(selector, message) {
			$(selector).text(message).show();
		}

		// 隐藏错误提示
		function hideError(selector) {
			$(selector).text("").hide();
		}
		// 校验用户名和密码是否为空
		function validateCredentials(username, password) {
			if (!username || username.trim() === "") {
				showError("#loginError", "用户名不能为空！");
				return false;
			} else {
				hideError("#loginError");
			}

			if (!password || password.trim() === "") {
				showError("#loginError", "密码不能为空！");
				return false;
			} else {
				hideError("#loginError");
			}

			return true; // 校验通过
		}
			// 加载保存的用户名和密码
		function loadSavedCredentials() {
			var savedUsername = localStorage.getItem("username");
			var savedPassword = localStorage.getItem("password");

			if (savedUsername && savedPassword) {
				$("#usernameInput").val(savedUsername);
				$("#passwordInput").val(savedPassword);
				$("#rememberMe").prop("checked", true); // 勾选“记住密码”
			}
		}

		// 保存用户名和密码
		function saveCredentials(username, password) {
			localStorage.setItem("username", username);
			localStorage.setItem("password", password);
		}

		// 清除保存的用户名和密码
		function clearCredentials() {
			localStorage.removeItem("username");
			localStorage.removeItem("password");
		}

        // 生成验证码
        function generateCaptcha() {
            var captcha = Math.random().toString(36).substring(2, 6).toUpperCase(); // 生成 4 位随机验证码
            $("#captchaImage").attr("src", "data:image/svg+xml;base64," + btoa(generateCaptchaImage(captcha))); // 显示验证码图片
            $("#captchaImage").data("captcha", captcha); // 将验证码存储在图片的 data 属性中
        }

        // 生成验证码图片（简单实现）
        function generateCaptchaImage(captcha) {
            return `<svg width="100" height="40" xmlns="http://www.w3.org/2000/svg">
                        <rect width="100%" height="100%" fill="#f0f0f0"/>
                        <text x="10" y="30" font-family="Arial" font-size="24" fill="#000">${captcha}</text>
                    </svg>`;
        }

        // 校验验证码是否正确
        function validateCaptcha(userCaptcha) {
            var serverCaptcha = $("#captchaImage").data("captcha"); // 获取生成的验证码
            return userCaptcha.toUpperCase() === serverCaptcha; // 比对用户输入和生成的验证码
        }

        // 绑定验证码图片点击刷新事件
        $("#captchaImage").click(function() {
            generateCaptcha(); // 重新生成验证码
            $("#captchaInput").val(""); // 清空输入框
            hideError("#loginError"); // 隐藏错误提示
        });

        // 使用document.cookie封装函数来设置cookie
        // 请求登录接口
        function requestLogin() {
            // 获取用户名和密码
            var username = $("#usernameInput").val();
            var password = $("#passwordInput").val();


            // 发送请求到 /admin.org/index
            $.ajax({
                url: "/web.login/login",
                type: "POST",
                dataType: "json",
                data: {
                    username: username,
                    password: password
                },
                success: function (response) {
					// 处理登录成功逻辑
					if (response.code == 0) {
						// 如果勾选了“记住密码”，保存用户名和密码
						if ($("#rememberMe").is(":checked")) {
                            days = 30;
							saveCredentials(username, password);
						} else {
                            days = 0;
							clearCredentials(); // 未勾选，清除保存的数据
						}

						//todo to
                        // setCookie(tokenCookieKey, response['data']['user']['token'], days);

                        // localStorage.setItem("tokenCookieKey", tokenCookieKey);
                        // localStorage.setItem("tokenKey", tokenKey);

                        //ajaxHeaders
                        // var ajaxHeaders = {};
                        // ajaxHeaders[tokenKey] = getCookie(tokenCookieKey); // 从 cookie 中获取 token 值
                        // ajaxHeaders["Cache-Control"] = "no-cache"; // 添加 Cache-Control 属性
                        //
                        // var context = {};
                        // context.ajaxHeaders = ajaxHeaders;

						window.location.href = "/web/index.html";
                        // window.location.href = "/web.login/loginInfo";

					} else {
						// 处理登录失败逻辑
						showError("#loginError", response.msg);
					}
                },
                error: function (xhr, status, error) {
                    // 处理请求错误
					showError("#loginError", "请求失败，请稍后重试！");
                    console.error("请求失败:", error);
                }
            });
        }
    </script>
</body>
</html>
